<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>免费在线 BMI 计算器 - 免费计算你的身体质量指数 (BMI)</title>
</head>

<body>
    <div class="header">
        <div class="top">
            <span>语言：</span>
            <a href="javascript:;">English |</a>
            <a href="javascript:;">简体中文 |</a>
            <a href="javascript:;">繁体中文 </a>
        </div>
        <div class="theme all">
            <div class="logo">
                <a href="javastript:;">
                    <img src="imgs/bmi-logo.png" alt="">
                </a>
            </div>
            <div class="title">
                <p class="title_top">免费在线 BMI 计算器</p>
                <p class="title_bot">身体质量指数 (Body Mass Index, 简称BMI), 亦称克托莱指数, 是目前国际上常用的衡量人体胖瘦程度以及是否健康的一个标准。BMI
                    值超标，意味着你必须减肥了。</p>
            </div>
        </div>
    </div>
    <div class="blank"></div>
    <div class="middle all">
        <div class="left">
            <p style="font-weight: 700;">免费计算你的身体质量指数 (BMI)</p>
            <div class="data">
                <div>
                    <span>度量单位：</span>
                    <input type="radio" id="1" name="en">
                    <label for="1">公制</label>
                    <input type="radio" id="2" name="en">
                    <label for="2">英制</label>
                </div>
                <div>
                    <span>我的身高：</span>
                    <input type="text" id="height" name="height" value="身高"
                        style="width: 186px; height: 31px;background-color: rgba(127, 255, 212, 0.452); border:1px solid #000;">
                    <span>单位：厘米cm</span>
                </div>
                <div>
                    <span>我的体重：</span>
                    <input type="text" name="weight" id="weight" value="体重"
                        style="width: 186px; height: 31px; background-color: rgba(127, 255, 212, 0.452);border:1px solid#000;">
                    <span>单位：千克kg</span>
                </div>
                <div>
                    <span>BMI标准：</span>
                    <select name="" id="">
                        <option value="">中国标准</option>
                        <option value="">国际标准</option>
                        <option value="">日本标准</option>
                        <option value="">新加坡标准</option>
                    </select>
                </div>
                <div>
                    <input type="checkbox">
                    <span> 自动保存 BMI 历史记录</span>
                </div>
                <h3 class="results" id="results">你的 BMI 值: <span id="BMI" class="red"></span> ，身体状态：
                    <span id="status" class="red"></span>
                </h3>
                <div>
                    <button onclick="guessNum()">计算BMI</button>
                </div>
            </div>
        </div>
        <div class="right">
            <span style="font-weight: 700;">BMI 中国标准</span>
            <b class="quota" id="quota">
                <span>></span>
            </b>
            <div class="table">
                <table>
                    <thead>
                        <tr>
                            <th bgcolor="#8DD8F8">分类</th>
                            <th bgcolor="#8DD8F8">BMI范围</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td bgcolor="#ccc">偏瘦</td>
                            <td bgcolor="#ccc">&lt; =18.4</td>
                        </tr>
                        <tr>
                            <td bgcolor="#66cc00">正常</td>
                            <td bgcolor="#66cc00">18.5 ~ 23.9</td>
                        </tr>
                        <tr>
                            <td bgcolor="#ffff00">过重</td>
                            <td bgcolor="#ffff00">24.0 ~ 27.9</td>
                        </tr>
                        <tr>
                            <td bgcolor="#ff9900">肥胖</td>
                            <td bgcolor="#ff9900">>= 28.0</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="bottom all" style="overflow: hidden;">
        <div>
            <h5>我的 BMI 历史记录</h5>
        </div>
        <div class="chart">
            <table width='99%' ; border="0" ; cellpadding="3" cellspacing="1" class="DarkLines">
                <thead>
                    <tr class="FieldTitle">
                        <td>#</td>
                        <td>日期</td>
                        <td>身高</td>
                        <td>体重</td>
                        <td>BMI</td>
                        <td>操作</td>
                    </tr>
                    <tr>
                        <td colspan="13" class="FieldBody">
                            <p class="nodata">
                                当前没有任何 BMI 记录。请输入你的身高和体重，并选中“自动保存 BMI 历史记录”，记算你的 BMI 指数。</p>
                        </td>
                    </tr>
                </thead>
                <tbody id="list">
                </tbody>

            </table>
        </div>
    </div>
    </div>
    <script src="index.js"></script>
    <br><br><br><br><br><br><br><br>
</body>

</html>